<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ManageSystem</title>
    <meta name="theme-color" content="#ffc91d"/>
    <link rel="icon" href="/resource/myCenter/img/32.png" sizes="32x32"/>
    <link rel="icon" href="/resource/myCenter/img/192.png" sizes="192x192"/>
    <link href="/resource/myCenter/kico.css" rel="stylesheet" type="text/css"/>
    <link href="/resource/myCenter/moreduo.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Morris chart -->
    <link href="/resource/css/morris/morris.css" rel="stylesheet" type="text/css"/>
    <!-- jvectormap -->
    <link href="/resource/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css"/>
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css"/>
</head>
<style>
    .updateAdmin {
        position: absolute;
        left: 0px;
        margin-top: -350px;
        margin-left: 200px;
        z-index: 1200;
        width: 900px;
        height: 490px;
        background-color: #00a7d0;
        box-shadow: #bab6aa;
        display: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 36px;
        border-top-right-radius: 10px;
    }

    .but {
        float: right;
    }

    .fugai {
        width: 1000%;
        height: 650px;
        position: absolute;
        left: auto;
        margin-top: -450px;
        z-index: 1100;
        background-color: rgba(41, 81, 62, 0.92);
        display: none;
    }

    .form-horizontal {

    }

    .pws input {
        width: 170px;
    }

    .stu_left {
        float: left;
        width: 460px;
        margin-left: 30px;
        margin-top: 30px;
    }
</style>
<body>
<aside class="sidebar">
    <div class="avatar">
        <img src="/resource/myCenter/img/avatar.jpg" title="保罗酱"/>
    </div>
    <nav class="nav">
        <a href="#info">基本资料</a>
        <a href="#skills">掌握技能</a>
        <a href="#works">荣誉证书</a>
        <a href="#story">活动经历</a>
        <a href="#team">个人介绍</a>
    </nav>
</aside>
<main>
    <section id="info">
        <div class="wrap">
            <h2 class="title">基本资料</h2>
            <div class="row">
                <div class="col-l-4">
                    <p>姓名：<span th:text="${user.username}"></span></p>
                    <p>英文名：<span th:text="${user.realname}"></span></p>
                    <p>手机号：<span th:text="${user.mobile}"></span></p>
                </div>
                <div class="col-l-4">

                </div>
                <div class="col-l-4">

                </div>
            </div>
        </div>
        <button class="but" th:onclick="updateAdmin()">编辑</button>
    </section>
    <div id="updateAdmin" class="updateAdmin">
        <div class="pws">
            <div class="panel-body">
                <div class="form-horizontal" data-validator-form>

                    <form class="col s12" id="form1" enctype="multipart/form-data" th:action="@{/admin/user/add}"
                          onsubmit="return validateForm();" method="post" th:align="left">
                        <input type="hidden" th:value="${user.id}" id="id" name="id"/>
                        <div class="stu_left">
                            <div class="form-group form-control-medium">
                                <label for="realname">真实名称：</label>
                                <input id="realname" name="realname" type="text" th:value="${user.realname}"
                                       class="form-control"/>
                            </div>
                            <div class="form-group form-control-medium">
                                <label for="username">用户昵称：</label>
                                <input id="username" name="username" type="text" th:value="${user.username}"
                                       class="form-control"/>
                            </div>
                            <div class="form-group form-control-medium">
                                <label for="mobile">手机号：</label>
                                <input id="mobile" name="mobile" type="text" th:value="${user.mobile}"
                                       class="form-control"/>
                            </div>
                            <input id="createdBy" name="createdBy" type="hidden" class="form-control"/>
                            <input id="updatedBy" name="updatedBy" type="hidden" class="form-control"/>
                            <div class="form-group form-control-medium">
                                <label for="password">密码：</label>
                                <input id="password" name="password" type="password" th:value="${user.password}"
                                       class="form-control"/>
                            </div>
                            <div class="form-group" align="center">
                                <div class="col-sm-offset-2 col-sm-6">
                                    <button type="submit" class="btn btn-primary">确认新增</button>
                                    <button type="button" class="btn btn-primary" onclick="colseWin();">退出新增</button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <!--页面遮挡侧面-->
    <div id="fugai" class="fugai"></div>

    <section id="skills">
        <div class="wrap">
            <h2 class="title">掌握的技能</h2>
            <div class="row scrollable">
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-html5"></i>
                    </div>
                    <div class="skills-title">
                        <h3>HTML 5</h3>
                        <p>熟悉 HTML5 网站的架构和开发</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-css3"></i>
                    </div>
                    <div class="skills-title">
                        <h3>CSS3</h3>
                        <p>熟悉使用 CSS3 写响应式网站、动画等</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="skills-title">
                        <h3>JavaScript</h3>
                        <p>能使用 JS 制作简单的程序、交互与特效</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="works">
        <div class="wrap">
            <h2 class="title">作品/荣誉证书</h2>
            <div class="row">
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/binkic-2017.jpg"/>
                        <p>缤奇团队 2017 官网</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/space.jpg"/>
                        <p>个人博客</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/dream.jpg"/>
                        <p>梦想主题班会</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/kico-style.jpg"/>
                        <p>Kico Style 响应式框架</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/robots.jpg"/>
                        <p>小缤机器人</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/single.jpg"/>
                        <p>Single 博客主题</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/kico-player.jpg"/>
                        <p>Kico Player 播放器</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/sweet.jpg"/>
                        <p>个人主页 Sweet</p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="/resource/myCenter/img/works/binkic-2018.jpg"/>
                        <p>缤奇团队 2018 官网</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="story">
        <div class="wrap">
            <h2 class="title">个人活动经历</h2>
            <div class="row">
                <div class="col-m-8">
                    <ul class="timeline">
                        <li>2016.07.03：创立缤奇（Binkic）团队</li>
                        <li>2016.12.20：仿照某动漫官网编写模板，并搭建运营了一个动漫型社区</li>
                        <li>2017.05.30：带领团队进行招新，并发起了首个游戏项目：<a>色块冲刺</a></li>
                        <li>2017.08.17：为团队制作了首部宣传片：<a href="javascript:;" target="_blank">创意可以改变什么</a></li>
                        <li>2017.12.08：个人编写的前端响应式框架 <a href="javascript:;" target="_blank">Kico Style</a> 初现雏形</li>
                        <li>2018.03.01：基于 Kico Style 的第一个原创 <a href="javascript:;" target="_blank">缤奇团队官网</a> 正式上线</li>
                        <li>2018.04.27：使用前端技术编写的 <a href="javascript:;" target="_blank">梦想晨会</a> 制作完成</li>
                        <li>2018.06.07：参加“众创杯”创业大赛校园选拔赛，团队项目荣获三等奖</li>
                        <li>2018.06.17：动漫门户网站制作完成，内含一个自己设计的简单音乐播放器</li>
                        <li>2018.06.25：参加全国中职信息技术技能大赛微网站项目，荣获一等奖</li>
                        <li>2018.08.03：原创博客主题 <a href="javascript:;" target="_blank">Single</a> 发布，截至 2 月共有 66 Stars
                        </li>
                        <li>2018.09.19：个人编写的播放器 <a href="javascript:;" target="_blank">Kico Player</a> 发布测试版</li>
                        <li>2018.12.12：基于 ES6 的时钟小工具 <a href="javascript:;" target="_blank">Kico Tools</a> 发布测试版</li>
                        <li>2018.12.18：第一个基于 PHP 的个人首页 <a href="javascript:;" target="_blank">Sweet</a> 发布正式版</li>
                        <li>2019.01.01：缤奇团队新<a href="javascript:;" target="_blank">官网</a>正式上线，后端采用 Typecho 驱动</li>
                        <li>2019.02.16：结合前后端制作了一个春节的<a href="javascript:;" target="_blank">问答红包</a>，使用正则判断答案</li>
                    </ul>
                </div>
                <div class="col-m-4 center-fixed">
                    <img src="/resource/myCenter/img/story.png"/>
                </div>
            </div>
        </div>
    </section>
    <section class="content-d" id="team">
        <div class="wrap">
            <h2 class="title">个人自荐</h2>
            <div class="row">
                <div class="col-m-6">
                    <p>我的团队 -
                        缤奇团队由一群热爱科技创新的年轻人所组成，做到了“实际”与“创新”的结合。奇思妙想不乏真正落实。集思广益，生动有趣的创意，尽在缤奇。缤奇团队如今有超过30名成员，各个部门互帮互助，同为一个目标而努力进取着。</p>
                    <p>缤奇团队致力于开发原创游戏、动漫等项目。目前我们已完成项目有手机游戏“色块冲刺”、聊天娱乐项目“小缤机器人”等。正在创作项目有解密游戏“月亮湖的秘密”、VR 项目“梦想码头”等。缤奇官网
                        &amp; 社区已陆续开放。网站采用团队成员自主编写的 CSS3 自适应框架，针对移动设备有布局优化，缤奇团队有着丰富的网站建设技术能力、有独立的画师以及文编。</p>
                    <p>团队官网：<a href="http://www.llnh1314.xyz">http://www.llnh1314.xyz</a></p>
                </div>
                <div class="col-m-6 center">
                    <img src="/resource/myCenter/img/team.png"/>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <p>© 2018 By <a href="http://www.llnh1314.xyz" title="douglas" target="_blank">Douglas</a>.</p>
    </footer>
</main>

<script src="/resource/myCenter/kico.js"></script>
<script src="/resource/myCenter/moreduo.js"></script>
<script>
    //新增弹框th:onclick="editPassword();"
    function updateAdmin() {
        document.getElementById("updateAdmin").style.cssText = "display:block";
        document.getElementById("fugai").style.cssText = "display:block";
    }

    //关闭新增弹框
    function colseWin() {
        document.getElementById("pwsd").style.cssText = "display:none";
        document.getElementById("fugai").style.cssText = "display:none";
        window.location.href = "/stu/lesson/list";
    }
</script>
</body>
</html>